<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>南京大学职业咨询室预约平台</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/i/ico_128X128.ico') }}">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="apple-touch-icon-precomposed" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/amazeui.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/app.css', v='1.4') }}">
    <script src="{{ url_for('static', filename='assets/js/jquery.min.js') }}"></script>
    <style>
    
    .am-cf {
        text-align: center;
        float: none;
    }
    
    .main {
        text-align: center;
        margin:100px 0 0 0;
    }


    .main table tr td {
        border-top:0;
    }

    .cancel table tr td {
        border-top:0;
    }

    #table1 tr td:nth-child(1){
        width:18%;
        font-size:14px;
        padding-right:0;
        padding-left:0;
    }
    #table1 tr td:nth-child(2){
        width:60%;
        font-size:14px;
    }
    
    </style>
</head>

<body>
<div class="header">
    <!--<div class="header-back" onclick="history.back()">返回</div>-->
    <div class="header-title">取消预约</div>
</div>
<div class="content">
    <div class="alert alert-warning">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class=flashes>
        {% for message in messages %}
        <div class="am-alert am-alert-secondary" data-am-alert>
          <button type="button" class="am-close">&times;</button>
          <div style="text-align: center;">{{ message }}</div>
        </div>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
    </div>
    <div class="cancel" style="margin-top:50px;">
        <div class="am-center">
            <table class="am-table am-table-centered" id="table1" cellpadding="0" cellspacing="0" style="border:none;">
                <tr>
                    <td><label>手&nbsp;&nbsp;机&nbsp;&nbsp;号</label></td>
                    <td><input type="text" class="am-form-field" name="very_tele" id="id_cancel_tele" value="{{fpcont}}" style="width:100%;height: 100%;" placeholder="手机号为登录和查询账号" readonly></td>
                    <td><button id="getverycode" class="am-btn am-btn-default" style="width:100px;color:purple;text-align:center;font-size:12px;line-height:20px;">获取验证码</button></td>
                </tr>
                
                <tr>
                    <td><label>预约编号</label></td>
                    <td><input type="text" class="am-form-field" name="yy_seq" id="id_yy_seq" autocomplete="off" value="{{yyseq}}" style="width:100%;height: 100%;" placeholder="" readonly></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><label>取消理由</label></td>
                    <td><input type="text" class="am-form-field" name="cancel_reason" id="id_cancel_reason" autocomplete="off" value="" style="width:100%;height: 100%;" placeholder="请输入取消理由"></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label></td>
                    <td><input type="text" class="am-form-field" name="very_code" id="id_very_code" autocomplete="off" value="" style="width:100%;height: 100%;" placeholder="请输入验证码"></td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
        <div class="am-cf">
            <button type="text" id="commit_cancel" value="提交取消" class="am-btn am-btn-primary">提交取消</button>
            <button type="text" id="back_" value="返回" onclick="javascript:window.location.href='./get_query_cancel_page';" class="am-btn am-btn-default">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回</button>
        </div>

        <form name="njusub">
            {{ form.csrf_token }}
        </form>
    </div>
</div>

<div class="footer">
    <ul>
        <li><a href="/get_teacher_schedule" class="footer-item">预约咨询</a></li>
        <li><a href="/urgent_booking" class="footer-item">紧急咨询</a></li>
        <li><a href="/student_query_login_student" class="footer-item on">我的预约</a></li>
        <li><a href="/get_consultant_story_page" class="footer-item">咨询室故事</a></li>
        <li><a href="/index" class="footer-item">返回首页</a></li>
    </ul>
</div>

    <script type="text/javascript">

    function checkIsTeleNum(a) {
        var validTeleNum = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
        return validTeleNum.test(a);
    }

    function commit_can()
    {
        document.njusub.action="/cancel_book?contact="+$("#id_cancel_tele").val()+"&verycode="+$("#id_very_code").val()+"&feedback="+$("#id_cancel_reason").val()+"&yyseq="+$("#id_yy_seq").val();
        document.njusub.method="post";
        document.njusub.submit();
    }

    var $SCRIPT_ROOT = {{request.script_root | tojson | safe}};
    $("#commit_cancel").click(function(){
        if ($("#id_cancel_reason").val()=="") {
            alert("请输入取消理由！");
            return false;
        };

        if ($("#id_very_code").val()=="") {
            alert("请输入验证码！");
            return false;
        };

        var csrftoken = $('meta[name=csrf-token]').attr('content');
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        $.ajax({
            // 请求发送方式
            type: 'post',
            // 验证文件
            url: $SCRIPT_ROOT + '/cancel_book',
            // 用户输入的帐号密码
            data: {
                'contact': $("#id_cancel_tele").val(),
                'verycode': $("#id_very_code").val(),
                'feedback': $("#id_cancel_reason").val(),
                'yyseq': $("#id_yy_seq").val()
            },
            // 异步，不写默认为True
            async: true,
            //请求成功后的回调
            success: function(data) {
                alert(data.msg);
                if (data.ret==false) {
                    return false;
                } else {
                    window.location.href = './get_query_cancel_page';
                };
            },
            error: function() {
                //window.location.href = './?msg='+data.msg;
                alert('服务端异常');
                return false;
            }

        }); 
    });

    var wait=60;  
    function time(o) {  
            if (wait == 0) {  
                o.removeAttribute("disabled");            
                o.value="获取验证码";  
                wait = 60;  
            } else {  
                o.setAttribute("disabled", true);  
                o.value="重新发送(" + wait + ")";  
                wait--;  
                setTimeout(function() {  
                    time(o);  
                },  
                1000);
                //alert(wait);  
            }  
        }  

    document.getElementById("getverycode").onclick=function(){
        if (checkIsTeleNum($("#id_cancel_tele").val())==false) {
            alert("请输入正确的电话号码！");
            return false;
        };

        var csrftoken = $('meta[name=csrf-token]').attr('content');
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        $.ajax({
            // 请求发送方式
            type: 'post',
            // 验证文件
            url: $SCRIPT_ROOT + '/get_verify_code',
            // 用户输入的帐号密码
            data: {
                'contact': $("#id_cancel_tele").val()
            },
            // 异步，不写默认为True
            async: true,
            //请求成功后的回调
            success: function(data) {
                //alert("已发送验证码！");
                //alert(data.msg);
                //alert(data.status);
            },
            error: function() {
                window.location.href = './?msg='+data.msg;
                alert('服务端异常');
            }

        }); 
        //开始计时
        time(this);
    }  

    </script>
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="{{ url_for('static', filename='assets/js/jquery.min.js') }}"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
    <script src="{{ url_for('static', filename='assets/js/amazeui.min.js') }}"></script>
</body>
</html>
